<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="取消"
    okText="保存"
    wrapClassName="ant-modal-cust-warp"
    style="top:20%;height: 60%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
        关闭
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row class="form-row" :gutter="24">
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="提成类型">
              <a-select placeholder="请选择提成类型" v-decorator="[ 'type', validatorRules.type ]" v-if="!model.id" @change = "handleChangeType">
                <a-select-option value="1">统一数字</a-select-option>
                <a-select-option value="2">阶梯提成</a-select-option>
              </a-select>
              <a-input v-decorator.trim="[ 'typeStr' ]" :readOnly="true" v-if="model.id" />
            </a-form-item>
          </a-col>
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="起始金额">
              <a-input v-decorator.trim="[ 'beginPrice' ]" :readOnly="true" />
            </a-form-item>
          </a-col>
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结束金额">
              <a-input v-decorator.trim="[ 'endPrice', validatorRules.endPrice ]" :readOnly="priceReadOnly" />
            </a-form-item>
          </a-col>
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="比例">
              <a-input placeholder="请输入比例" v-decorator.trim="[ 'percent', validatorRules.percent ]" suffix="%" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  import {addCommision, editCommision, getBeginPrice } from '@/api/api'
  import JDate from '@/components/jeecg/JDate'
  export default {
    name: "CommisionRuleModal",
    components: {
      JDate
    },
    data () {
      return {
        title:"操作",
        visible: false,
        model: {},
        isReadOnly: false,
        priceReadOnly: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          type:{
            rules: [
              { required: true, message: '请选择提成类型!' },
            ]
          },
          percent:{
            rules: [
              { required: true, message: '请输入比例!' },
            ]
          },
          endPrice:{
            rules: [
              { pattern: /^(([0-9][0-9]*)|([0]\.\d{0,4}|[0-9][0-9]*\.\d{0,4}))$/, message: '金额格式不正确!' }
            ]
          },
        },
      }
    },
    created () {
    },
    methods: {
      add () {
        this.isReadOnly = false
        this.edit({})
      },
      edit (record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        if(this.model.id) {
          this.priceReadOnly = true
        } else {
          this.priceReadOnly = false
        }
        if(this.model.type === '1') {
          this.model.typeStr = '统一数字'
        } else if(this.model.type === '2') {
          this.model.typeStr = '阶梯提成'
        }
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'type', 'typeStr', 'beginPrice', 'endPrice', 'percent'))
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleChangeType(value) {
        if(value === '1') {
          this.priceReadOnly = true
          this.form.setFieldsValue({ 'beginPrice': '' })
        } else if(value === '2') {
          this.priceReadOnly = false
          getBeginPrice().then((res) => {
            if (res.code === 200) {
              if(res.data) {
                this.form.setFieldsValue({ 'beginPrice': res.data.beginPrice })
              }
            }
          })
        }
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let formData = Object.assign(this.model, values);
            if(formData.type === '2') {
              if(formData.endPrice) {
                if(formData.endPrice <= formData.beginPrice) {
                  that.$message.warning('抱歉，结束金额必须大于起始金额！')
                  that.confirmLoading = false
                  return
                }
              } else {
                that.$message.warning('抱歉，结束金额不能为空！')
                that.confirmLoading = false
                return
              }
            }
            let obj;
            if(!this.model.id){
              obj=addCommision(formData)
            }else{
              obj=editCommision(formData)
            }
            obj.then((res)=>{
              if(res.code === 200){
                that.$emit('ok');
                that.close();
              }else{
                that.$message.warning(res.data.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>

<style scoped>

</style>